<template>
  <div class="home">
    <!--  banner --start -->
    <van-swipe :autoplay="3000"
               indicator-color="white"
               :height=162>
      <van-swipe-item v-for="(image, index) in images"
                      :key="index">
        <img v-lazy="image"
             width="100%"
             height='162' />
      </van-swipe-item>
    </van-swipe>
    <!--  banner --end -->

    <!-- middle --start-->
    <van-grid :border="false"
              class="van-grid-middle">
      <van-grid-item @click="jumpRouter">
        <img width="64"
             src="@/assets/image/home/icon-kind-1.png" />
        <p class="text-center font-s-24 font-white">本科</p>
      </van-grid-item>
      <van-grid-item @click="jumpRouter">
        <img width="64"
             src="@/assets/image/home/icon-kind-2.png" />
        <p class="text-center font-s-24 font-white">中高职</p>
      </van-grid-item>
      <van-grid-item @click="jumpRouter">
        <img width="64"
             src="@/assets/image/home/icon-kind-3.png" />
        <p class="text-center font-s-24 font-white">K12</p>
      </van-grid-item>
      <van-grid-item @click="jumpRouter"
                     class="bg-purple">
        <img width="64"
             src="@/assets/image/home/icon-kind-4.png" />
        <p class="text-center font-s-24 font-white">更多</p>
      </van-grid-item>
    </van-grid>
    <!-- middle--end -->

    <!-- new-product --start -->
    <div class="div-new-porduct div-produt-item ">
      <div class="div-title">
        <span class="font-s-36 font-white"> <i class="line"></i>
          新品上线</span>
        <router-link to="home"
                     class="font-s-28 pull-right">查看更多>></router-link>
      </div>
      <div class="clearFix"></div>
      <van-grid :border="false"
                :column-num="2"
                gutter="4">
        <van-grid-item v-for="n in 4"
                       :key="n"
                       @click="jumpRouter">
          <img width="100%"
               height="95"
               src="@/assets/image/home/product-1.png" />
          <p class="font-white font-s-30 p-instroduct">VR-Humman虚拟人体的实时..</p>

          <div class="text-left bottom">
            <span>
              <van-icon name="eye-o"
                        class="font-s-24" />100 </span>
            <span>
              <van-icon name="star-o"
                        class="font-s-24" />
              80
            </span>
          </div>

        </van-grid-item>

      </van-grid>
    </div>
    <!-- new-product --end -->

    <!-- 产品系列  --start-->
    <div class="div-series-list div-produt-item">
      <div class="div-title">
        <span class="font-s-36 font-white"> <i class="line"></i>
          产品系列</span>
        <router-link to="home"
                     class="font-s-28 pull-right">查看更多>></router-link>
      </div>
      <div class="clearFix"></div>
      <van-grid :border="false"
                :column-num="2"
                gutter="0"
                v-for="n in 4"
                :key="n"
                class="margin-bottom-20"
                @click="jumpRouter">
        <van-grid-item class="div-img">
          <img width="100%"
               height="100%"
               src="@/assets/image/home/product-2.jpg" />
        </van-grid-item>
        <van-grid-item class="padding-left-10 margin-top-0">
          <h4 class="font-white text-left font-s-30">生理科普系列</h4>
          <p class=" font-s-28">
            生理科普系列是通过VR技术对生理的知识，比如人体结构、艾滋病、毒品等原理进行还原…
          </p>
          <div class="text-left div-w-100">
            <van-button round
                        class="font-s-24"
                        color="#704AFF">查看详情</van-button>
          </div>

        </van-grid-item>
      </van-grid>
    </div>
    <!-- 产品系列 -->

    <!-- 精品推荐--start  -->
    <div class="div-recommend div-produt-item">
      <div class="div-title">
        <span class="font-s-36 font-white"> <i class="line"></i>
          产品系列</span>
        <router-link to="home"
                     class="font-s-28 pull-right">查看更多>></router-link>
      </div>
      <div v-for="n in 4"
           :key="n">
        <div class="margin-top-15 div-img">
          <img width="100%"
               height="100%"
               src="@/assets/image/home/product-3.png" />
        </div>

        <van-row class="bottom">
          <van-col span="14"
                   class="font-s-30 font-white">VR地下矿井安全教育系统dasdsadasdasd…
          </van-col>
          <van-col span="10"
                   class="text-right">
            <span>
              <van-icon name="eye-o"
                        class="font-s-24" />100 </span>
            <span>
              <van-icon name="star-o"
                        class="font-s-24" />
              80
            </span></van-col>
        </van-row>
      </div>

    </div>
    <!-- 精品推荐--end  -->

    <!-- 共享内容 -->

    <!-- new-product --start -->
    <div class="div-new-porduct div-produt-item  margin-top-10"
         style="padding-bottom:0.2rem;">
      <div class="div-title">
        <span class="font-s-36 font-white"> <i class="line"></i>
          共享内容</span>
        <router-link to="home"
                     class="font-s-28 pull-right">查看更多>></router-link>
      </div>
      <div class="clearFix"></div>
      <van-grid :border="false"
                :column-num="2"
                gutter="4">
        <van-grid-item v-for="n in 4"
                       :key="n"
                       @click="jumpRouter">
          <img width="100%"
               height="95"
               src="@/assets/image/home/product-1.png" />
          <p class="font-white font-s-30 p-instroduct">VR-Humman虚拟人体的实时..</p>

          <div class="text-left bottom">
            <span>
              <van-icon name="eye-o"
                        class="font-s-24" />100 </span>
            <span>
              <van-icon name="star-o"
                        class="font-s-24" />
              80
            </span>
          </div>

        </van-grid-item>

      </van-grid>
    </div>
    <!-- new-product --end -->

    <!-- 查看全部 --start -->
    <div class="check-all text-center">
      <router-link to="home"
                   class="font-s-28">
        查看全部
        <img src="@/assets/image/home/check-all.png"
             width="24"
             style="vertical-align: -7px;"
             alt="">
      </router-link>
    </div>
    <!-- 查看全部 --end-->
  </div>
</template>

<script>
import Vue from 'vue'
import { Lazyload } from 'vant'
Vue.use(Lazyload)
export default {
  name: "Home",
  data () {
    return {
      show: false,
      images: [
        require('@/assets/image/home/banner.png'),
        require('@/assets/image/home/banner.png')
      ]
    }
  },
  computed: {

  },
  methods: {
    jumpRouter () {
      const toast = this.$toast.loading({
        duration: 0,
        forbidClick: true,
        message: '功能待开发，请稍后'
      })
      let second = 2
      const timer = setInterval(() => {
        second--
        if (second) {
          toast.message = `功能待开发，请稍后`
        } else {
          clearInterval(timer)
          // 手动清除 Toast
          this.$toast.clear()
        }
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
.home {
  background-color: #131622;
  .bg-purple {
    background-color: $purple !important;
  }
  .van-grid-middle {
    height: 1.3rem;
    border-radius: 15px;
    overflow: hidden;
    background-color: #282c57;
  }

  //  公共的样式
  .div-produt-item {
    .div-title .line {
      display: inline-block;
      width: 0.04rem;
      height: 0.18rem;
      vertical-align: -0.02rem;
      border-radius: 0.02rem;
      background-color: $theme-color;
    }
  }

  // 新品上线
  .div-new-porduct {
    background-color: #1a1e33;
    padding: 0.35rem 0.15rem 0.1rem;
    .van-grid {
      margin-left: -4px;
      margin-right: -4px;
    }
    .p-instroduct {
      width: 160px;
      line-height: 40px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .van-icon {
      display: inline-block;
      color: #949494;
    }
    .bottom {
      color: #949494;
      display: block;
      width: 100%;
      span {
        display: inline-block;
        width: 60px;
        vertical-align: middle;
        i {
          vertical-align: -2px;
        }
      }
    }
  }
  //  新品上线end

  .div-series-list {
    margin-top: 10px;
    background-color: #1a1e33;
    padding: 0.35rem 0.15rem 0.1rem;
    .van-grid {
      margin: 0px;
    }
    .div-img {
      border-radius: 8px;
      overflow: hidden;
    }
    h4 {
      display: block;
      width: 100%;
      line-height: 0.42rem;
    }
    p {
      line-height: 20px;
      color: #d1d1d1;
    }
    .div-w-100 {
      width: 100%;
    }
    button {
      width: 0.8rem;
      height: 0.24rem;
      padding: 0px;
      line-height: 100%;
      margin-top: 0.2rem;
    }
  }
  //
  .div-recommend {
    margin-top: 10px;
    background-color: #1a1e33;
    padding: 0.35rem 0.15rem 0.1rem;
    .div-img {
      border-radius: 8px;
      overflow: hidden;
    }
    .bottom {
      color: #949494;
      display: block;
      width: 100%;
      .van-col--14 {
        line-height: 0.42rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      span {
        line-height: 0.42rem;
        display: inline-block;
        width: 60px;
        vertical-align: middle;
        i {
          vertical-align: -2px;
        }
      }
    }
  }
  .check-all {
    height: 60px;
    line-height: 50px;
    a {
      vertical-align: -0.03rem;
    }
  }
}
//  kind 颜色
::v-deep .van-grid-middle .van-grid-item__content {
  background-color: #282c57;
}
//  新品上线 颜色
::v-deep .div-new-porduct .van-grid-item__content {
  margin-top: 10px;
  // margin-bottom: 10px;
  padding: 0px;
  background-color: #1a1e33;
}
::v-deep .div-series-list .van-grid-item__content {
  margin-top: 10px;
  // margin-bottom: 10px;
  padding: 0px;
  background-color: #1a1e33;
}
</style>
